<template>
	<view class="grace-padding">
		<!-- 圈子详情 start -->
		<view class="grace-news-list" style="padding:10upx; width:700upx;">

			<view>
				<view class="social-banner" @click="goHomePage(obj.memberId,obj.memberCertification)">
					<view class="social-banner-img">
						<image :src="(obj.avatarImg==null||obj.avatarImg=='')?'../../../static/user.png':serverUrl+obj.avatarImg" mode="widthFix"></image>
					</view>
					<view class="social-banner-text">
						<text class="text-nickname">
							{{obj.author}}
						</text>
						<block v-if="obj.memberCertification==1">
							<image src="../../../static/v.png" style="width: 35upx; height: 35upx;" />
						</block>
						<view class="text-description">
							<text>{{obj.timehour}} {{obj.place}}</text>
						</view>
					</view>
				</view>
				<view class="grace-news-list-img-news">
					<view class="grace-news-list-title-main">
						<text @click="goTopicDetail(obj.topicId)" class="main-topic">{{obj.topicTitle}}</text>
						<label>{{obj.content}}</label>
					</view>
					<block v-if="obj.images!=null">
						<view class="grace-news-list-two">
							<block v-for="(image,k) in obj.images" :key="k">
								<image :src="serverUrl+image" :data-src="serverUrl+image" @tap="previewImage" mode="widthFix"></image>
							</block>
						</view>
					</block>
					<!-- 资源卡片 -->
					<view v-if="obj.resource!=undefined" class="grace-news-list-items" style="width:94%; padding:5px 3%;" @click="goShareDetail(obj.resource.data[0].type[0],obj.resource.data[0].id[0],obj.resource.data[0].title[0])">
						<image :src="obj.resource.data[0].cover[0]==null||obj.resource.data[0].cover[0]==''?'../../../static/l2.png':serverUrl+obj.resource.data[0].cover[0]" class="grace-news-list-img grace-list-imgs-l" mode="widthFix"></image>
						<view class="grace-news-list-title">
							<view class="grace-news-list-title-main">{{obj.resource.data[0].title[0]}}</view>
							<text class="grace-news-list-title-desc grace-text-overflow">{{obj.resource.data[0].author[0]}} {{obj.resource.data[0].create_time_str[0]}}</text>
						</view>
					</view>		
				</view>
					<view class="grace-rows">
						<view class="grace-items grace-rows-li grace-center">
							<image src="../../../static/zhuanfa.png" mode="widthFix"></image>
							<text class="li-text">转发</text>
						</view>
						<view class="grace-items grace-rows-li grace-center">
							<image src="../../../static/pinglun.png" mode="widthFix"></image>
							<text class="li-text">评论</text>
						</view>
						<view class="grace-items grace-rows-li grace-center" @click="editSocialMain()">
							<image src="../../../static/dianzan.png" mode="widthFix"></image>
							<block v-if="obj.likeCount==0">
								<text class="li-text">点赞</text>
							</block>
							<block v-else="">
								<text class="li-text">{{obj.likeCount}}</text>
							</block>
						</view>
					</view>
			</view>
		</view>
		<!-- 圈子详情 end-->

		<!-- 评论区 start -->
		<view class="grace-comment">
			<view class="" v-for="(value,key) in commentList" :key="key">
				<view class="grace-comment-list">
					<view class="grace-comment-face">
						<image :src="(value.memberAvatarImg==null||value.memberAvatarImg=='')?'../../../static/user.png':serverUrl+value.memberAvatarImg" mode="widthFix"></image>
					</view>
					<view class="grace-comment-body">
						<view class="grace-comment-top">
							<text>{{value.memberName}}</text>
							<text class="grace-iconfont icon-zan"></text>
						</view>
						<view class="grace-comment-date">
							<text>{{value.createTime}}</text>
							<text>{{value.likeCount}}</text>
						</view>
						<view class="grace-comment-content">{{value.content}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 评论区 end -->
		<view class="grace-more-bottom" style="margin-top:30px;">
			<block v-if="showMore">
				<navigator :url="'../comments/comments?id=' + id" class="grace-border">查看全部评论 <text class="grace-iconfont icon-arrow-right"></text></navigator>
			</block>
			<block v-if="commentList.length<1">暂无评论,快来抢沙发吧</block>
		</view>
		<view style="height:100upx;"></view>
		<!-- 评论输入框 -->
		<view class="grace-footer">
			<view class="grace-input">
				<view class="grace-input-icon grace-iconfont icon-write"></view>
				<input type="text" maxlength="150" :value="inputValue" @input="getInput" placeholder="写评论"></input>
			</view>
			<view class="grace-items" style="padding:0 20upx;" @click="saveSocialComment">发布</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},
		data() {
			return {
				serverUrl: this.serverUrl,
				obj: {},
				id: "",
				inputValue: "",
				commentList: [],
				showMore: false,
			}
		},
		onLoad(e) {
			//console.log(e)
			this.id = e.id;
			this.findSocialMain(e.id);
			this.getSocialComment(e.id);
		},
		methods: {
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
			goTopicDetail(id) {
				uni.navigateTo({
					url: "../../social/topic-detail/topic-detail?id=" + id,
				})
			},
			goHomePage(id,cert){
				if(cert==1){
					uni.navigateTo({
						url: '/pages/my/home-page/home-page?id='+id
					})
				}
			},			
			findSocialMain(id) {
				var data = {
					id: id,
				};
				uni.request({
					url: this.serverUrl + 'user-api/findSocialMain',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: data,
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							//console.log(r.data.data);
							this.obj = {
								author: r.data.data.memberName,
								memberId: r.data.data.memberId,
								memberCertification: r.data.data.memberCertification,								
								avatarImg: r.data.data.memberAvatarImg,
								place: r.data.data.createLocation,
								images: r.data.data.submitImages == null ? "" : r.data.data.submitImages.split(";"),
								timehour: r.data.data.createTime.substring(11),
								timeday: r.data.data.createTime.substring(0, 10),
								likeCount: r.data.data.likeCount,
								content: r.data.data.content,
								topicId: r.data.data.topicId,
								topicTitle: r.data.data.topicTitle == undefined ? "" : "#" + r.data.data.topicTitle + "#",
								resource: r.data.data.resource,
							
							}
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getSocialComment(id) {
				var data = {
					socialMainId: id,
					pageNumber: 1,
					pageSize: 5,
				};
				uni.request({
					url: this.serverUrl + 'user-api/getSocialComment',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: data,
					method: "POST",
					success: (r) => {
						//console.log(r.data.data);
						if (r.data.code == '000000') {
							var len = r.data.data.length;
							if (len > 4) {
								len = 4;
								this.showMore = true;
							}
							for (var i = 0; i < len; i++) {
								var tmpObj = {
									id: r.data.data[i].id,
									resourceId: r.data.data[i].resourceId,
									memberAvatarImg: r.data.data[i].memberAvatarImg,
									memberName: r.data.data[i].memberName,
									content: r.data.data[i].content,
									createTime: r.data.data[i].createTime,
									likeCount: r.data.data[i].likeCount,
								};
								this.commentList.push(tmpObj);
							}
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getInput: function(e) {
				this.inputValue = e.target.value;
			},
			editSocialMain(){
				var num = 1;//1或-1
				uni.request({
					url: this.serverUrl + 'user-api/editSocialMain',
					data: {
						id: this.id,
						likeCount: num
					},
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							this.obj.likeCount = this.obj.likeCount+num;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					}
				});				
			},			
			saveSocialComment() {
				if (this.hasLogin) {
					if (this.inputValue.length > 1) {
						var data = {
							socialMainId: this.id,
							username: this.userInfo.username,
							content: this.inputValue,
						};
						uni.request({
							url: this.serverUrl + 'user-api/saveSocialComment',
							header: {
								"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
							},
							data: data,
							method: "POST",
							success: (r) => {
								//console.log(r);
								if (r.data.code == '000000') {
									uni.showToast({
										title: '发布成功'
									});
									this.inputValue = "";
									this.commentList = [];
									this.getSocialComment(this.id);
								} else {
									uni.showToast({
										title: r.data.message
									});
								}
							},
							fail: (data, code) => {
								console.log('fail' + JSON.stringify(data));
							}
						})
					} else {
						uni.showToast({
							title: "请输入评论内容",
							icon: "none"
						});
					}
				} else {
					uni.navigateTo({
						url: "/pages/general/login/login?url=/pages/social/detail/detail&id=" + this.id
					})
				}
			},
			//预览图片#
			previewImage: function(e) {
				var current = e.target.dataset.src;
				var imgList = [];
				for(var i=0;i<this.obj.images.length;i++){
					imgList.push(this.serverUrl+this.obj.images[i]);
				}
				uni.previewImage({
					current: current,
					urls: imgList
				})
			},			
		}
	}
</script>

<style>
	.social-banner {
		width: 100%;
		display: flex;
		margin-bottom: 15upx;
	}

	.social-banner .social-banner-img {
		width: 90upx;
		height: 90upx;
		border-radius: 100%;
		margin-right: 20upx;
		flex-shrink: 0;
		overflow: hidden;
	}

	.social-banner .social-banner-img image {
		width: 100%;
		border-radius: 100%;
	}

	.social-banner .social-banner-text {
		margin-top: 10upx;
	}

	.social-banner .social-banner-text .text-nickname {
		font-size: 34upx;
		color: #2F2F2F;
		font-weight: bold;
	}

	.social-banner .social-banner-text .text-description {
		color: #6b6b6b;
		font-size: 28upx;
	}
	
	.grace-news-list-two {
		justify-content: space-between;
		width: 100%;
		display: flex;
		margin: 18upx 0;
		align-items: flex-start;
	}
	
	.grace-news-list-two image {
		width: 33%;
		margin: 0 1%;
	}
	.main-topic {
		color: #1874CD;
		margin: 0 4upx;
	}

	.grace-news-list-items {
		background-color: #F6F7F8;
	}

	.grace-news-list-items .grace-news-list-img {
		width: 120upx;
		height:125rpx;
	}

	.grace-rows view image {
		width: 50upx;
		height: 50upx;
	}

	.grace-rows-li {
		height: 60upx;
		line-height: 60upx;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.grace-rows-li .li-text {
		padding-left: 10upx;
	}
	
</style>
